<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html >
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>生产过程信息系统-主页</title>
    <link rel="stylesheet" href="../static/mint-ui/style.min.css">

    <style type="text/css">

        html {
            font-size: 100px;
            height: 100%;
        }

        body {
            height: 100%;
            padidng: 0;
            margin: 0;
            background-color: #F5F5F5;
            font-size: 0.16rem;
        }

        .my-card {
            font-size: 0.14rem;
            margin: 0.1rem;
            padding: 0 0.1rem 0 0.1rem;
            border-radius: 0.08rem;
            border: 0.01rem solid #DDDDDD;
            box-shadow: 0.00rem 0.00rem 0.1rem 0.00rem #DDDDDD;
            /*
             */
            /* color:#70706F; */
            background-color: #FFFFFF;
        }

        .my-card-title {

            display: flex;
            flex-direction: row;
            justify-content: space-between;

            padding: 0.09rem 0 0.07rem 0;
            border-bottom: 0.01rem solid #EEEEEE;
            margin-bottom: 0.04rem;

            color: #OOOOOO;

        }

        .my-card-opr {

            border-top: 0.01rem solid #EEEEEE;
            margin-top: 0.04rem;

            text-align: right;
            padding: 0.06rem 0 0.06rem 0;
        }

        .my-card-content {

            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;

            color: #70706F;

        }

        .my-card-content > div {
            display: flex;
            flex-direction: row;
            width: 46%;
            padding: 0.04rem 0 0.04rem 0;

        }

        .my-card-content-label {
            width: 0.5rem;
        }

        .my-header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 0.4rem;
        }

        .my-navbar {
            position: fixed;
            top: 0.4rem;
            left: 0;
            width: 100%;
            height: 0.46rem;
        }
    </style>

</head>
<body>
<div id="app" class="my-container">
    <mt-header fixed title="生产过程信息系统" :style="{height:'0.4rem'}"></mt-header>
    <div class="my-navbar">

        <mt-navbar v-model="selected" :style="{height:'0.46rem'}">
            <mt-tab-item id="pre-unpred">待前处理</mt-tab-item>
            <mt-tab-item id="pre-pred">已处理</mt-tab-item>
            <mt-tab-item id="pre-afterPred">后工序</mt-tab-item>
        </mt-navbar>

    </div>


    <!-- tab-container -->
    <mt-tab-container v-model="selected" ref="preTabContainer"
                      :style="{position:'fixed',top:'0.88rem',bottom:'0.02rem',width:'100%',overflow:'scroll'}">
        <mt-tab-container-item id="pre-unpred">

            <%-- @bottom-status-change="unpredBottomStatusChange"
            --%>

                <mt-loadmore   :top-method="unpredLoadTop"
                               :bottom-method="unpredLoadBottom"
                               :auto-fill="false"
                               :bottom-all-loaded="unpredAllLoaded" ref="unpreLoadmore">

                    <div class="my-card" v-for=" pro in unpredPage.list ">

                        <div class="my-card-title">
                            <div>组号 {{ pro.process_id }}</div>
                            <div>待前处理</div>
                        </div>

                        <div class="my-card-content">
                            <div>
                                <div class="my-card-content-label">客户</div>
                                <div>{{ pro.process_cus }}</div>
                            </div>
                            <div>
                                <div class="my-card-content-label">规格</div>
                                <div>{{ pro.process_std }}</div>
                            </div>
                            <div>
                                <div class="my-card-content-label">花色号</div>
                                <div>{{ pro.process_color }}</div>
                            </div>
                            <div>
                                <div class="my-card-content-label">投坯</div>
                                <div>{{ pro.group_num }}</div>
                            </div>
                        </div>
                        <div class="my-card-opr">
                            <mt-button type="danger" size="small" @click.prevent="finish(pro.process_id,pro.plan_type,pro.process_status)">完成前处理</mt-button>
                        </div>

                    </div>

                </mt-loadmore>

        </mt-tab-container-item>


        <mt-tab-container-item id="pre-pred">
            <mt-loadmore   :top-method="unpredLoadTop"
                           :bottom-method="unpredLoadBottom"
                           :auto-fill="false"
                           :bottom-all-loaded="unpredAllLoaded" ref="unpreLoadmore">

                <div class="my-card" v-for=" pro in unpredPage.list ">

                    <div class="my-card-title">
                        <div>组号 {{ pro.process_id }}</div>
                        <div>待后工序</div>
                    </div>

                    <div class="my-card-content">
                        <div>
                            <div class="my-card-content-label">客户</div>
                            <div>{{ pro.process_cus }}</div>
                        </div>
                        <div>
                            <div class="my-card-content-label">规格</div>
                            <div>{{ pro.process_std }}</div>
                        </div>
                        <div>
                            <div class="my-card-content-label">花色号</div>
                            <div>{{ pro.process_color }}</div>
                        </div>
                        <div>
                            <div class="my-card-content-label">前处理</div>
                            <div>{{ pro.pretreat_num }}</div>
                        </div>
                        <div>
                            <div class="my-card-content-label">布类型</div>
                            <div>
                                {{  pro.plan_type==1?"白布产品":pro.plan_type==2?"染色产品":pro.plan_type==3?"无底色印花产品":"有底色印花产品" }}
                            </div>
                        </div>
                    </div>
                    <div class="my-card-opr">
                        <mt-button type="danger" size="small" @click.prevent="finish(pro.process_id,pro.plan_type,pro.process_status)">完成下一步</mt-button>
                    </div>

                </div>

            </mt-loadmore>
        </mt-tab-container-item>
        <mt-tab-container-item id="pre-afterPred">
            <mt-cell v-for="n in 6" :title="'content ' + n"/>
        </mt-tab-container-item>

    </mt-tab-container>



</div>


<script type="text/javascript" src="../static/js/vue-2.5.16.min.js"></script>
<script type="text/javascript" src="../static/js/axios.min.js"></script>
<script type="text/javascript" src="../static/mint-ui/index.js"></script>


<script type="text/javascript">

    new Vue({
        el: '#app',//容器
        data: {//数据绑定
            selected:"pre-unpred",
            unpredPage: {},
            unpredAllLoaded:false
        },
        methods: {//方法
            // url,page,limit,status [地址，页码，每页大小，状态]
            loadUnpredData(url, page, limit, status) {//加载指定页码数据

                let _this = this;
                this.unpredAllLoaded = true;//执行加载数据前一定要设为TRUE，阻止其自动不停加载
                axios.get(url, {
                    params: {
                        process_status: status,
                        page: page,
                        limit: limit

                    }
                })
                    .then(function (response) {
                        console.log(response);
                        _this.unpredPage = response.data;

                        if(_this.unpredPage.hasNextPage){
                            //当前页若不是最后一页，设置该属性为false
                            _this.unpredAllLoaded = false;
                        }


                    })


                    .catch(function (error) {
                        console.log(error);
                    });


            },

            unpredLoadTop() {//下拉加载上一页数据

                if (this.selected=='pre-unpred'){
                    this.loadUnpredData('m_pretreatment', this.unpredPage.prePage, 5, '05');
                }
                if (this.selected=='pre-pred'){
                    this.loadUnpredData('m_pretreatment', this.unpredPage.prePage, 5, '10');

                }
                if (this.selected=='pre-afterPred'){

                }


                // 加载更多数据
                this.$refs.unpreLoadmore.onTopLoaded();

            },
            unpredLoadBottom(){

                if (this.selected=='pre-unpred'){
                    this.loadUnpredData('m_pretreatment', this.unpredPage.nextPage, 5, '05');

                }
                if (this.selected=='pre-pred'){
                    this.loadUnpredData('m_pretreatment', this.unpredPage.nextPage, 5, '10');

                }
                if (this.selected=='pre-afterPred'){

                }


                // // 加载更多数据
                // //     this.allLoaded = true;// 若数据已全部获取完毕
                this.$refs.unpreLoadmore.onBottomLoaded();
            },


            finish(process_id,plan_type,process_status){
                let _this= this;

                if (process_status==='05'){
                    _this.$messagebox.prompt('请输入已处理数').then(({ value, action }) => {
                        axios.put('m_pretreatment/'+process_id, {
                            pretreat_num: value
                        })
                            .then(function (response) {
                                let  data =response.data;
                                if(data.success){
                                    let instance= _this.$toast({
                                        message: data.message,
                                        iconClass: 'mint-toast-icon mintui mintui-success'
                                    });
                                    //1000毫秒后关闭，并进入home页
                                    setTimeout(() => {
                                        instance.close();
                                        _this.loadUnpredData('m_pretreatment', _this.unpredPage.pageNum, 5, '05');
                                    }, 500);


                                }
                            })
                            .catch(function (error) {
                                console.log(error);
                            });
                    });
                }else



                if (plan_type==2){
                    _this.$messagebox.prompt('请输入已染色数').then(({ value, action }) => {

                        alert("请输入已染色数");

                        // axios.put('m_pretreatment/'+process_id, {
                        //     dye_num: value
                        // })
                        //     .then(function (response) {
                        //         let  data =response.data;
                        //         if(data.success){
                        //             let instance= _this.$toast({
                        //                 message: data.message,
                        //                 iconClass: 'mint-toast-icon mintui mintui-success'
                        //             });
                        //             //1000毫秒后关闭，并进入home页
                        //             setTimeout(() => {
                        //                 instance.close();
                        //                 _this.loadUnpredData('m_pretreatment', _this.unpredPage.pageNum, 5, '05');
                        //             }, 500);
                        //
                        //
                        //         }
                        //     })
                        //     .catch(function (error) {
                        //         console.log(error);
                        //     });

                    });
                }else

                if (plan_type==3){
                    _this.$messagebox.prompt('请输入已印花数').then(({ value, action }) => {

                        alert("请输入已印花数");

                        // axios.put('m_pretreatment/'+process_id, {
                        //     dye_num: value
                        // })
                        //     .then(function (response) {
                        //         let  data =response.data;
                        //         if(data.success){
                        //             let instance= _this.$toast({
                        //                 message: data.message,
                        //                 iconClass: 'mint-toast-icon mintui mintui-success'
                        //             });
                        //             //1000毫秒后关闭，并进入home页
                        //             setTimeout(() => {
                        //                 instance.close();
                        //                 _this.loadUnpredData('m_pretreatment', _this.unpredPage.pageNum, 5, '05');
                        //             }, 500);
                        //
                        //
                        //         }
                        //     })
                        //     .catch(function (error) {
                        //         console.log(error);
                        //     });

                    });
                }else

                if (plan_type==4){
                    _this.$messagebox.prompt('请输入已染色数').then(({ value, action }) => {

                        alert("请输入已染色数");

                        // axios.put('m_pretreatment/'+process_id, {
                        //     dye_num: value
                        // })
                        //     .then(function (response) {
                        //         let  data =response.data;
                        //         if(data.success){
                        //             let instance= _this.$toast({
                        //                 message: data.message,
                        //                 iconClass: 'mint-toast-icon mintui mintui-success'
                        //             });
                        //             //1000毫秒后关闭，并进入home页
                        //             setTimeout(() => {
                        //                 instance.close();
                        //                 _this.loadUnpredData('m_pretreatment', _this.unpredPage.pageNum, 5, '05');
                        //             }, 500);
                        //
                        //
                        //         }
                        //     })
                        //     .catch(function (error) {
                        //         console.log(error);
                        //     });

                    });
                }






            }



        },

        //回调函数（Vue对象挂在界面完成时）
        mounted(){
            if (this.selected=='pre-unpred'){
                this.loadUnpredData('m_pretreatment', 1, 5, '05');
            }
            if (this.selected=='pre-pred'){
                // this.loadUnpredData('m_pretreatment', 1, 5, '10');
            }
            if (this.selected=='pre-afterPred'){

            }
        },

        //回复滚动条置顶
        updated(){
            this.$refs.preTabContainer.$el.scrollTop=0;
        },

        //侦听器
        watch: {

            selected(selected){
                if (selected=='pre-unpred'){
                    this.loadUnpredData('m_pretreatment', 1, 5, '05');
                }
                if (selected=='pre-pred'){
                    this.loadUnpredData('m_pretreatment', 1, 5, '10');

                }
                if (selected=='pre-afterPred'){

                }

            }

        }


    });

</script>
</body>
</html>
